<template>
  <view class="main bg-white">
      <view class="bg-header"></view>
      <form class="form">
        <!-- 用户名输入框 -->
        <view class="input-view">
          <view class="input-item">
            <text class="input-icon iconfont icon-user"></text>
            <input name="userName" type="text" :placeholder="placeholder['1']" autocomplete="off" maxlength="20"
                   v-model="registerForm.userName"
                   :placeholder-style="colorFont['1']"
                   @input="inputInput('1',registerForm.userName)"
                   @focus="inputFocus('1',registerForm.userName)"
                   @blur="inputBlur('1',registerForm.userName)"
            />
            <text v-if="successImg.show1" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
            <text v-else :class="[showClearBtn['1']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('1')"></text>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['1']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg1 }}
        </view>
        <view class="zcicon" v-if="errorClass['1']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg1 }}
        </view>
        <!-- 昵称输入框 -->
        <view class="input-view">
          <view class="input-item">
            <text class="input-icon iconfont icon-nicheng1"></text>
            <input name="nickName" type="text" :placeholder="placeholder['2']" autocomplete="off"
                   v-model="registerForm.nickName"
                   :placeholder-style="colorFont['2']"
                   @input="inputInput('2',registerForm.nickName)"
                   @focus="inputFocus('2',registerForm.nickName)"
                   @blur="inputBlur('2',registerForm.nickName)"
            />
            <text v-if="successImg.show2" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
            <text v-else :class="[showClearBtn['2']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('2')"></text>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['2']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg2 }}
        </view>
        <view class="zcicon" v-if="errorClass['2']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg2 }}
        </view>

        <!-- 手机号输入框 -->
        <view class="input-view">
          <view class="input-item">
            <text class="input-icon iconfont icon-shoujihao2"></text>
            <input name="phonenumber" type="number" :placeholder="placeholder['3']" autocomplete="off"
                   maxlength="11"
                   v-model="registerForm.phonenumber"
                   :placeholder-style="colorFont['3']"
                   @input="inputInput('3',registerForm.phonenumber)"
                   @focus="inputFocus('3',registerForm.phonenumber)"
                   @blur="inputBlur('3',registerForm.phonenumber)"
            />
            <text v-if="successImg.show3" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
            <text v-else :class="[showClearBtn['3']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('3')"></text>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['3']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg3 }}
        </view>
        <view class="zcicon" v-if="errorClass['3']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg3 }}
        </view>

        <!-- 密码输入框 -->
        <view class="input-view">
          <view class="input-item">
            <text class="input-icon iconfont icon-pwd"></text>
            <input name="password" type="password" :placeholder="placeholder['4']" autocomplete="off"
                   :placeholder-style="colorFont['4']"
                   v-model="registerForm.password"
                   @input="inputInput('4',registerForm.password)"
                   @focus="inputFocus('4',registerForm.password)"
                   @blur="inputBlur('4',registerForm.password)"
            />
            <text v-if="successImg.show4" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
            <text v-else :class="[showClearBtn['4']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('4')"></text>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['4']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg4 }}
        </view>
        <view class="zcicon" v-if="errorClass['4']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg4 }}
        </view>
        <view class="zcicon" v-if="qrClass['2']">
          <text style="font-size: 30rpx;margin: 0;color: #ff9595;" class="input-icon iconfont icon-frown"></text>{{ msgValue.msg4 }}
        </view>
        <view class="zcicon" v-if="qrClass['3']">
          <text style="font-size: 30rpx;margin: 0;color: #ffbd4a;" class="input-icon iconfont icon-meh"></text>{{ msgValue.msg4 }}
        </view>
        <view class="zcicon" v-if="qrClass['4']">
          <text style="font-size: 30rpx;margin: 0;color: #1AFA29;" class="input-icon iconfont icon-smile"></text>{{ msgValue.msg4 }}
        </view>

        <!-- 再次密码输入框 -->
        <view class="input-view">
          <view class="input-item">
            <text class="input-icon iconfont icon-zaicishurumima"></text>
            <input name="password2" type="password" :placeholder="placeholder['5']" autocomplete="off"
                   :placeholder-style="colorFont['5']"
                   v-model="password2"
                   @input="inputInput('5',password2)"
                   @focus="inputFocus('5',password2)"
                   @blur="inputBlur('5',password2)"
            />
            <text v-if="successImg.show5" style="color: #1AFA29;" class="input-icon iconfont icon-chenggong-copy"></text>
            <text v-else :class="[showClearBtn['5']?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('5')"></text>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['5']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg5 }}
        </view>
        <view class="zcicon" v-if="errorClass['5']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg5 }}
        </view>

        <!-- 验证码 -->
        <view class="input-view">
          <view class="input-item" style="padding: 0">
            <text class="input-icon iconfont icon-yanzhengma2"></text>
            <input style="flex: 2" name="code" type="text" :placeholder="placeholder['6']" autocomplete="off"
                   :placeholder-style="colorFont['6']"
                   v-model="registerForm.code"
                   @input="inputInput('6',registerForm.code)"
                   @focus="inputFocus('6',registerForm.code)"
                   @blur="inputBlur('6',registerForm.code)"
            />
            <text :class="[showClearBtn['6']?'':'hidden']" class="input-icon iconfont icon-clear" @click="inputClear('6')"></text>
            <img style="flex:2;height: 40px;" :src="codeUrl" @click="getCode"/>
          </view>
        </view>
        <view class="zcicon" v-if="defClass['6']">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg6 }}
        </view>
        <view class="zcicon" v-if="errorClass['6']" style="color: #ff9595;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-tishi-copy-copy"></text>{{ msgValue.msg6 }}
        </view>

        <view class="tip flex-row">
          <text>注册前请先阅读</text>
          <navigator url="/pages/subpage/login/subpage/protocol/main" class="protocol-text">《隐私协议》</navigator>
        </view>
        <view class="submit-btn-wrap">
          <button style="height: 35px;line-height: 35px;" @click="submit" class="submit-btn bg-primary color-white">立 即 注 册</button>
        </view>
      </form>
      <view class="loder" v-if="loading" >
        <div class="loader-part">正在建立信息...</div>
      </view>
      <view class="bg-footer flex-row">
        <navigator
          class="back-nav"
          @click="navigateBack"
          open-type="navigateBack"
        >
          <text class="iconfont icon-back"></text>
        </navigator>
      </view>
      <i-message id="message"/>
      <van-notify id="van-notify" />
    </view>
</template>

<script>
import {registerLogin,Register,getCodeImg} from "../../../api/login";
import {getToken} from "../../../utils/auth";
import {$Message} from '@/../static/iview/base/index'
import Bus from "../../../utils/bus";
import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名，指向src目录

export default {
  name: "index",
  data() {
    return {
      // 表单校验
      regs: {
        userNameReg: /^(([\u4e00-\u9fa5])|[a-zA-Z0-9-_]){4,20}$/,
        pwdReg: /^.{6,20}$/,
        phone: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        numReg: /\d/,
        strReg: /[a-zA-Z]/,
        tsReg: /[^\u4e00-\u9fa5a-zA-Z0-9]/,
        reg1: /^[0-9]{5,}$/,
        reg2: /^[a-z]{5,}$/,
        reg3: /^[a-z0-9]{6,16}$/,
        reg4: /^[a-z0-9_]{6,16}$/,
        reg5: /\s/g,
        reg6: /^[a-z_]{6,16}$/,
        reg7: /^[0-9_]{6,16}$/
      },
      defClass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      errorClass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      qrClass: {
        1: false,
        2: false,
        3: false,
        4: false
      },
      showErrorCLass: {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      },
      msgValue: {
        msg1: '支持中文、英文、数字、“-”、“_”的组合，4-20个字符',
        msg2: '支持中文、英文、数字、字符等的组合，4-20个字符',
        msg3: '请输入11数字的手机号码',
        msg4: '建议使用字母、数字和符号两种及以上的组合，6-20个字符',
        msg5: '请再次输入密码',
        msg6: '请输入验证码结果'
      },
      successImg: {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false
      },
      showClearBtn:{
        1:false,
        2:false,
        3:false,
        4:false,
        5:false,
        6:false,
      },
      colorFont:{
        1:'color: #afafaf;',
        2:'color: #afafaf;',
        3:'color: #afafaf;',
        4:'color: #afafaf;',
        5:'color: #afafaf;',
        6:'color: #afafaf;',
      },
      placeholder:{
        1:'账户名',
        2:'账户昵称',
        3:'常用手机号',
        4:'您的密码',
        5:'再次输入密码',
        6:'验证码',
      },
      registerForm: {
        userName: '',
        nickName: '',
        password: '',
        phonenumber: '',
        roleIds: [2],
        code: '',
        uuid: ''
      },
      password2: '',
      codeUrl: '',
      loading: false
    }
  },
  created(){
    if (!getToken()){
      this.getCode();
    }
  },
  methods: {
    //获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.registerForm.uuid = res.uuid
      })
    },
    //确认
    submit() {
      this.colorFont={
        1:'color: #afafaf;',
        2:'color: #afafaf;',
        3:'color: #afafaf;',
        4:'color: #afafaf;',
        5:'color: #afafaf;',
        6:'color: #afafaf;',
      }
      this.defClass = {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      }
      this.showErrorCLass = {
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false
      }
      if (!this.successImg.show1 || !this.successImg.show2 || !this.successImg.show3 || !this.successImg.show4 || !this.successImg.show5) {
        if (this.registerForm.userName == '') {
          // this.colorFont['1']='color: #ff9595;'
          this.errorClass['1'] = this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (this.registerForm.userName.length < 4 || this.registerForm.userName.length > 20) {
          this.showErrorCLass['1'] = this.errorClass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(this.registerForm.userName)) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else if ('注册失败，账号已存在' == this.msgValue.msg1) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '注册失败，账号已存在'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
        }

        if (this.registerForm.nickName == '') {
          // this.colorFont['2']='color: #ff9595;'
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (this.registerForm.nickName.length < 1 || this.registerForm.nickName.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.showErrorCLass['2'] = false
          this.errorClass['2'] = false
        }

        if (this.registerForm.phonenumber == '') {
          // this.colorFont['3']='color: #ff9595;'
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(this.registerForm.phonenumber) || this.registerForm.phonenumber.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else if (this.msgValue.msg3 == '注册失败，手机号码已存在') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '注册失败，手机号码已存在'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
        }
        if (this.registerForm.password == '') {
          // this.colorFont['4']='color: #ff9595;'
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (this.registerForm.password.length < 6 || this.registerForm.password.length > 20) {
          this.showErrorCLass['4'] = true
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(this.registerForm.password)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
        }
        if (this.password2 != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else if(this.password2==''){
          // this.colorFont['5']='color: #ff9595;'
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '密码不能为空'
        }else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
        }
        if (!this.registerForm.code){
          // this.colorFont['6']='color: #ff9595;'
          this.errorClass['6'] = this.showErrorCLass['6'] = true
          this.msgValue.msg6 = '验证码不能为空'
        }
        return
      }
      if (!this.registerForm.code){
        this.errorClass['6'] = this.showErrorCLass['6'] = true
        this.msgValue.msg6 = '验证码不能为空'
        return
      }

      this.loading=true
      Register(this.registerForm).then(res => {
        if (res.code === 500) {
          if (res.msg=='验证码已失效'){
            this.showErrorCLass['6'] = true
            this.errorClass['6'] = true
            this.msgValue.msg6 = res.msg
          }else if(res.msg=='验证码错误'){
            this.showErrorCLass['6'] = true
            this.errorClass['6'] = true
            this.msgValue.msg6 = res.msg
          }else if (res.msg == '注册失败，账号已存在') {
            this.showErrorCLass['1'] = true
            this.successImg.show1 = false
            this.errorClass['1'] = true
            this.msgValue.msg1 = res.msg
          } else if (res.msg == '注册失败，手机号码已存在') {
            this.showErrorCLass['3'] = true
            this.successImg.show3 = false
            this.errorClass['3'] = true
            this.msgValue.msg3 = res.msg
          }
          Notify({
            message:res.msg,
            type:'danger',
            top:'8%'
          });
          this.getCode()
          // this.setToast({ title: res.msg });
        } else if (res.code===200) {
          let loginForm = {
            username: this.registerForm.userName || this.registerForm.phonenumber,
            password: this.registerForm.password
          }
          /*this.$store.dispatch("RegisterLogin", loginForm).then(() => {
            this.$store.getters.logged=true
            this.registerForm={
              userName: '',
              nickName: '',
              password: '',
              phonenumber: '',
              roleIds: [2],
              code: '',
              uuid: ''
            }
            this.password2=''
            Notify({
              message:"注册成功，以为你登录成功",
              type:'success',
              top:'8%'
            });
            // wx.reLaunch({ url: '/pages/mine/main' });
          }).catch(() => {
            this.loading = false;
            this.getCode();
          });*/
          registerLogin(loginForm).then(res => {
            Notify({
              message:"注册成功，以为你登录成功",
              type:'success',
              top:'8%'
            });
            this.$set(res,'logged',true)
            this.$store.dispatch("Login", res);
            this.registerForm={
              userName: '',
              nickName: '',
              password: '',
              phonenumber: '',
              roleIds: [2],
              code: '',
              uuid: ''
            }
            this.password2=''
            // 改变上一页面的状态
            // Bus.$emit('跳转刷新','register');
            wx.reLaunch({ url: '/pages/mine/main' });
            // this.setToast({ title: "注册成功，以为你登录成功",icon:'success' });
          })
        } else {
          Notify({
            message:"注册出错啦，请重试",
            type:'danger',
            top:'8%'
          });
          this.getCode()
        }
      }).catch(err => {
        console.log(err);
        this.setModal({
          content: "不好！注册出现异常，快去汇报给开发小哥！"
        });
        this.getCode()
      }).then(() => {
        this.loading=false
        // Bus.$emit('跳转刷新','register');
        this.getCode()
      });

      /*if (!this.registerForm.userName) {
        this.colorFont['1']='color: #ff9595;'
        this.setToast({ title: "用户名不能为空" })
        return
      } else if (this.registerForm.userName.length < 4 || this.registerForm.userName.length > 20) {
        this.colorFont['1']='color: #ff9595;'
        this.placeholder["1"]='长度应在4-20个字符之间'
        this.setToast({ title: "用户名长度应在4-20个字符之间" })
        return
      } else if (!this.registerForm.nickName) {
        this.colorFont['2']='color: #ff9595;'
        this.setToast({ title: "昵称不能为空" });
        return
      } else if (!this.registerForm.phonenumber) {
        this.colorFont['3']='color: #ff9595;'
        this.setToast({ title: "手机号码不能为空" });
        return
      } else if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.registerForm.phonenumber)) || this.registerForm.phonenumber.length != 11) {
        this.registerForm.phonenumber=''
        this.colorFont['3']='color: #ff9595;'
        this.placeholder["3"]='手机号码格式错误'
        this.setToast({ title: "请输入11位有效的手机号码" });
        return
      } else if (!this.registerForm.password) {
        this.colorFont['4']='color: #ff9595;'
        this.setToast({ title: "密码不能为空" });
        return
      } else if (this.password2 != this.registerForm.password) {
        this.colorFont['5']='color: #ff9595;'
        this.setToast({ title: "您两次输入的密码不同，请重试" });
        return
      } else if (!this.registerForm.code) {
        this.colorFont['6']='color: #ff9595;'
        this.setToast({ title: "验证码不能为空" });
        return
      } else {
        this.loading=true
        Register(this.registerForm).then(res => {
          if (res.code === 500) {
            Notify({
              message:res.msg,
              type:'danger',
              top:'8%'
            });
            this.getCode()
            // this.setToast({ title: res.msg });
          } else if (res.code===200) {
            let loginForm = {
              username: this.registerForm.userName || this.registerForm.phonenumber,
              password: this.registerForm.password
            }
            registerLogin(loginForm).then(res => {
              this.$set(res,'logged',true)
              this.$store.dispatch("Login", res);
              this.registerForm={
                userName: '',
                nickName: '',
                password: '',
                phonenumber: '',
                roleIds: [2],
                code: '',
                uuid: ''
              }
              this.password2=''
              Notify({
                message:"注册成功，以为你登录成功",
                type:'success',
                top:'8%'
              });
              // 改变上一页面的状态
              // Bus.$emit('跳转刷新','register');
              wx.reLaunch({ url: '/pages/mine/main' });
              // this.setToast({ title: "注册成功，以为你登录成功",icon:'success' });
            })
          } else {
            Notify({
              message:"注册出错啦，请重试",
              type:'danger',
              top:'8%'
            });
            this.getCode()
            // this.setToast({ title: "注册出错啦，请重试" });
          }
        }).catch(err => {
          console.log(err);
          this.setModal({
            content: "不好！注册出现异常，快去汇报给开发小哥！"
          });
          this.getCode()
        }).then(() => {
          this.loading=false
          this.getCode()
        });
      }*/
    },
    //返回上一步
    navigateBack(){
      this.registerForm={
        userName: '',
        nickName: '',
        password: '',
        phonenumber: '',
        roleIds: [2],
        code: '',
        uuid: ''
      }
      this.password2=''
      wx.navigateBack({ delta: 1 });
    },
    // 输入框输入
    inputInput(e,val) {

      if (e == '1') {
        this.defClass['1'] = false
        this.successImg.show1 = false
        this.showErrorCLass['1'] = false
        this.showClearBtn['1']=true
        if (val == '') {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (val.length < 4 || val.length > 20) {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(val)) {
          this.errorClass['1'] = true
          this.showErrorCLass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
      } else if (e == '2') {
        this.defClass['2'] = false
        this.successImg.show2 = false
        this.showClearBtn['2']=true
        this.showErrorCLass['2'] = false
        if (val == '') {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (val.length < 1 || val.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.showErrorCLass['2'] = false
          this.errorClass['2'] = false
          this.successImg.show2 = true
        }
      } else if (e == '3') {
        this.defClass['3'] = false
        this.successImg.show3 = false
        this.showClearBtn['3']=true
        this.showErrorCLass['3'] = false
        if (val == '') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(val) || val.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
          this.successImg.show3 = true
        }
      } else if (e == '4') {
        this.defClass['4'] = false
        this.successImg.show4 = false
        this.showClearBtn['4']=true
        this.showErrorCLass['4'] = false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (val.length < 6 || val.length > 20) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['3'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.errorClass['4'] = false
          this.qrClass['2'] = false
          this.qrClass['3'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
      } else if (e == '5') {
        this.successImg.show5 = false
        this.defClass['5'] = false
        this.showErrorCLass['5'] = false
        this.showClearBtn['5']=true
        if (val != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
      }
    },

    // 输入框聚焦
    inputFocus(e,val) {
      if (e == '1') {
        this.successImg.show1 = false
        this.colorFont['1']='color: #afafaf;'
        this.showClearBtn['1']=true
        this.defClass['1'] = true
        this.errorClass['1'] = false
        this.msgValue.msg1 = '支持中文、英文、数字、“-”、“_”的组合，4-20个字符'
      } else if (e == '2') {
        this.successImg.show2 = false
        this.defClass['2'] = true
        this.errorClass['2'] = false
        this.msgValue.msg2 = '支持中文、英文、数字、字符等的组合，1-20个字符'
        this.colorFont['2']='color: #afafaf;'
        this.showClearBtn['2']=true
      } else if (e == '3') {
        this.successImg.show3 = false
        this.defClass['3'] = true
        this.errorClass['3'] = false
        this.msgValue.msg3 = '请输入11数字的手机号码'
        this.colorFont['3']='color: #afafaf;'
        this.showClearBtn['3']=true
      } else if (e == '4') {
        this.successImg.show4 = false
        this.defClass['4'] = true
        this.errorClass['4'] = false
        this.qrClass['2'] = false
        this.qrClass['3'] = false
        this.qrClass['4'] = false
        this.msgValue.msg4 = '建议使用字母、数字和符号两种及以上的组合，6-20个字符'
        this.colorFont['4']='color: #afafaf;'
        this.showClearBtn['4']=true
      } else if (e == '5') {
        this.successImg.show5 = false
        this.defClass['5'] = true
        this.errorClass['5'] = false
        this.msgValue.msg5 = '请再次输入密码'
        this.colorFont['5']='color: #afafaf;'
        this.showClearBtn['5']=true
      } else if (e == '6') {
        this.defClass['6'] = true
        this.errorClass['6'] = false
        this.msgValue.msg6 = '请输入验证码结果'
        this.colorFont['6']='color: #afafaf;'
        this.showClearBtn['6']=true
      } else {
        this.defClass = {
          1: false,
          2: false,
          3: false,
          4: false,
          5: false,
          6: false
        }
      }
    },

    // 输入框焦点消失
    inputBlur(e,val) {

      if (e == '1') {
        this.showClearBtn["1"]=false
        this.defClass['1'] = false
        if (val == '') {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '用户名不能为空'
        } else if (val.length < 4 || val.length > 20) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '长度应在4-20个字符之间'
        } else if (!this.regs.userNameReg.test(val)) {
          this.showErrorCLass['1'] = true
          this.errorClass['1'] = true
          this.msgValue.msg1 = '格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
        } else {
          this.showErrorCLass['1'] = false
          this.errorClass['1'] = false
          this.successImg.show1 = true
        }
      } else if (e == '2') {
        this.showClearBtn["2"]=false
        this.defClass['2'] = false
        if (val == '') {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '昵称不能为空'
        } else if (val.length < 1 || val.length > 20) {
          this.showErrorCLass['2'] = true
          this.errorClass['2'] = true
          this.msgValue.msg2 = '长度应在1-20个字符之间'
        } else {
          this.errorClass['2'] = this.showErrorCLass['2'] = false
          this.successImg.show2 = true
        }
      } else if (e == '3') {
        this.defClass['3'] = false
        this.showClearBtn["3"]=false
        if (val == '') {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '手机号码不能为空'
        } else if (!this.regs.phone.test(val) || val.length != 11) {
          this.showErrorCLass['3'] = true
          this.errorClass['3'] = true
          this.msgValue.msg3 = '格式错误，仅支持11位有效数字的手机号码'
        } else {
          this.showErrorCLass['3'] = false
          this.errorClass['3'] = false
          this.successImg.show3 = true
        }
      } else if (e == '4') {
        this.defClass['4'] = false
        this.showClearBtn["4"]=false
        if (val == '') {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码不能为空'
        } else if (val.length < 6 || val.length > 20) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '密码长度应在6-20个字符之间'
        } else if (this.regs.reg5.test(val)) {
          this.showErrorCLass['4'] = true
          this.errorClass['4'] = true
          this.msgValue.msg4 = '登录密码仅支持字母、数字或字符，不可包含空格'
        } else if (this.regs.reg1.test(val) || this.regs.reg2.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['2'] = true
          this.msgValue.msg4 = '有被盗风险,建议使用字母、数字和符号两种及以上组合'
        } else if (this.regs.reg6.test(val) || this.regs.reg3.test(val) || this.regs.reg7.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['3'] = true
          this.msgValue.msg4 = '安全强度适中，可以使用三种以上的组合来提高安全强度'
        } else if (this.regs.reg4.test(val)) {
          this.showErrorCLass['4'] = false
          this.successImg.show4 = true
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.msgValue.msg4 = '你的密码很安全'
        } else {
          this.showErrorCLass['4'] = false
          this.msgValue.msg4 = '你的密码很安全'
          this.errorClass['4'] = false
          this.qrClass['4'] = true
          this.successImg.show4 = true
        }
      } else if (e == '5') {
        this.showClearBtn["5"]=false
        this.defClass['5'] = false
        if (val != this.registerForm.password) {
          this.showErrorCLass['5'] = true
          this.errorClass['5'] = true
          this.msgValue.msg5 = '您两次输入的密码不同，请重试'
        } else {
          this.showErrorCLass['5'] = false
          this.errorClass['5'] = false
          this.successImg.show5 = true
        }
      } else if (e == '6') {
        this.showClearBtn["6"]=false
        this.defClass['6'] = false
        if (val == '') {
          this.errorClass['6'] = true
          this.showErrorCLass['6'] = true
          this.msgValue.msg6 = '验证码不能为空'
        } else {
          this.showErrorCLass['6'] = false
          this.errorClass['6'] = false
        }
      } else {
      }
    },

    // 清空输入框
    inputClear(e) {
      if (e =='1') {
        this.registerForm.userName=""
        this.showClearBtn["1"]=false
        this.successImg.show1 = false
      } else if (e =='2') {
        this.registerForm.nickName=""
        this.showClearBtn["2"]=false
        this.successImg.show2 = false
      }else if (e =='3') {
        this.registerForm.phonenumber = ''
        this.showClearBtn["3"]=false
        this.successImg.show3 = false
      }else if (e =='4') {
        this.registerForm.password = ''
        this.showClearBtn["4"]=false
        this.successImg.show4 = false
      }else if (e =='5') {
        this.password2 = ''
        this.showClearBtn["5"]=false
        this.successImg.show5 = false
      }else if (e =='6') {
        this.registerForm.code=""
        this.showClearBtn["6"]=false
        this.successImg.show6 = false
      }
    },
  }
}
</script>

<style scoped>

.zcicon{
  color: #afafaf;
  font-size: 26rpx;
  margin-left: 20rpx;
  margin-top: -30rpx;
  margin-bottom: 20rpx;
}
.zc{
  padding-top: 30rpx;
  font-size: 28rpx;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-header {
  position: fixed;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 15%;
  /*height: 35%;*/
  background-image: url("");
}

.bg-footer {
  position: fixed;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  /*height: 22%;*/
  height: 20%;
  align-items: flex-end;
  background-image: url("");
}

.form {
  width: 70%;
  height: 72%;
  margin: 0 auto;
}

.input-view {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 40rpx;
  background: #efeff4;
  animation-delay: 0.1s;
}

.input-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #ececec;
}

.input-icon {
  z-index: 999;
  font-size: 45rpx;
  margin: 0 15rpx;
}

.input-item input {
  flex: 1;
  font-size: 30rpx;
}

.tip {
  font-size: 28rpx;
  color: #afafaf;
  margin-left: 10rpx;
  animation-delay: 0.2s;
}

.protocol-text {
  color: #ffbd4a;
}

.submit-btn-wrap {
  animation-delay: 0.3s;
}

.submit-btn {
  margin: 40rpx 0 0 0;
  font-size: 32rpx;
  border-radius: 40rpx;
}

.phcolor{
  color: #afafaf;
}
.input-placeholder {
  color: #afafaf;
}
input::-webkit-input-placeholder{
  color: #ff9595;
}

.error-placeholder {
  color: #ff9595;
}

.hidden {
  visibility: hidden;
}

.back-nav {
  text-align: center;
  padding: 30rpx;
}

.back-nav text {
  font-size: 50rpx;
}

</style>
<style scoped>
.loader-part {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  /*top: 75%;*/
  bottom: 6%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ffbd4a;
  letter-spacing: 0.2em;
}
.loader-part::before,
.loader-part::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ffbd4a;
  position: absolute;
  animation: load 0.7s infinite alternate ease-in-out;
}
.loader-part::before {
  top: 0;
}
.loader-part::after {
  bottom: 0;
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

</style>
